<template>
  <div class="container">
    <div class="flex p_bottom10">
      <div
        class="c_666 fs_16 fw cp"
        :class="type == 1 ? 'c_3580eb' : ''"
        @click="type = 1"
      >
        数据分析
      </div>
      <div
        class="c_666 fs_16 fw m_left20 cp"
        :class="type == 2 ? 'c_3580eb' : ''"
        @click=";(type = 2), (page_data.current = 1), get_flow_list()"
      >
        流程管理
      </div>
    </div>
    <el-divider></el-divider>
    <div v-if="type == 1" class="p_top10">
      <div class="flex flex_wp">
        <echart_1></echart_1>
        <echart_2></echart_2>
        <echart_3></echart_3>
        <echart_4></echart_4>
        <echart_5></echart_5>
        <echart_6></echart_6>
      </div>
    </div>
    <div v-else>
      <div class="flex gap_20">
        <div
          v-for="(item, index) in flow_type_list"
          :key="item.value"
          class="p_10 cp"
          :class="flow_type_index == index ? 'c_3580eb' : ''"
          @click="
            ;(flow_type_index = index), (page_data.current = 1), get_flow_list()
          "
        >
          {{ item.name }}
        </div>
      </div>
      <el-divider></el-divider>
      <div class="flex_js p_10_0">
        <div>{{ flow_type_list[flow_type_index].name }}列表</div>
        <setTable
          :data="header_list"
          :height_size="height_size"
          @changeShowTable="
            (e) => {
              header_list[e].showTable = !header_list[e].showTable
            }
          "
          @resetTableSet="
            () => {
              header_list.forEach((item) => {
                item.showTable = true
              })
            }
          "
          @changeHeightSize="
            (e) => {
              height_size = e
            }
          "
        ></setTable>
      </div>
      <el-table :data="data" border class="tc">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column label="流程名称" prop="procDefName"></el-table-column>
        <el-table-column label="发起人" prop="startUserName"></el-table-column>
        <el-table-column label="发起时间" prop="createTime"></el-table-column>
        <el-table-column label="节点名" prop="taskName"></el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button type="primary" @click="showPassBox(scope.row)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="m_10_0 pagination"
        v-model:currentPage="page_data.current"
        v-model:page-size="page_data.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="list_debounce()"
        @current-change="list_debounce()"
      />
    </div>
    <el-drawer
      v-model="pass_box"
      direction="rtl"
      destroy-on-close
      :close-on-click-modal="false"
    >
      <el-form label-width="80px">
        <el-form-item label="审核">
          <el-radio-group v-model="pass_data.values.isYes">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="0">驳回</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核建议">
          <el-input
            type="textarea"
            placeholder="请输入"
            v-model="pass_data.comment"
          ></el-input>
        </el-form-item>
        <div class="tr m_top10">
          <el-button @click="pass_box = false">取消</el-button>
          <el-button type="primary" @click="pass_submit()">确定</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import echart_1 from './echarts/echart_1.vue'
import echart_2 from './echarts/echart_2.vue'
import echart_3 from './echarts/echart_3.vue'
import echart_4 from './echarts/echart_4.vue'
import echart_5 from './echarts/echart_5.vue'
import echart_6 from './echarts/echart_6.vue'

import { formatDate, debounce } from '@/utils/utils' // 权限校验
import search from '@/view/components/search.vue'
import setTable from '@/view/components/setTable.vue'
import { onMounted, ref, onUnmounted, computed } from 'vue'
import axios from '@/service/HttpRequest'
import serviceApi from '@/service/api'
import EventBus from '@/utils/EventBus'
import { FormInstance, ElMessage, ElMessageBox, FormRules } from 'element-plus'
import { useStore } from 'vuex'
const type = ref(1)
const flow_type_list = ref([
  { name: '待办', value: '1' },
  { name: '已办', value: '2' },
  { name: '我发起的', value: '3' },
  { name: '所有流程', value: '4' },
])
const flow_type_index = ref(0)
const loading = ref(false)
const height_size = ref(1)
const max_height = ref()
const header_list = ref([
  {
    label: '流程名称',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '发起人',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '发起时间',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
  {
    label: '节点名',
    value: '',
    showTable: true,
    type: 'input',
    isShow: true,
    options: [],
  },
])
const data = ref([])
const total = ref(0)
const page_data = ref({
  current: 1,
  pageSize: 10,
})
const pass_box = ref(false)
const pass_data = ref({
  taskId: '',
  procInsId: '',
  comment: '',
  values: { isYes: 1 },
})
const showPassBox = (e) => {
  axios
    .request({ url: serviceApi.flow_info + '/' + e.taskId, method: 'get' })
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
  pass_data.value = {
    taskId: e.taskId,
    procInsId: e.procInsId,
    comment: '',
    values: { isYes: 1 },
  }
  pass_box.value = true
}
const pass_submit = () => {
  axios
    .request({
      url: serviceApi.flow_todoComplete,
      method: 'post',
      data: pass_data.value,
    })
    .then((res) => {
      console.log(res)
      pass_box.value = false
      ElMessage.success('操作成功！')
      setTimeout(() => {
        get_flow_list()
      }, 1000)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
onMounted(() => {
  max_height.value = window.innerHeight - 320 // 不带分页的 table 高度
  get_flow_list()
})
const get_flow_list = () => {
  axios
    .request({
      url:
        flow_type_index.value == 0
          ? serviceApi.flow_todoList
          : flow_type_index.value == 1
          ? serviceApi.flow_finishedPage
          : flow_type_index.value == 2
          ? serviceApi.flow_myProcessPage
          : serviceApi.flow_allPage,
      method: 'post',
      data: page_data.value,
    })
    .then((res) => {
      console.log(res)
      if (res.data === null) return
      data.value = res.data.content
      total.value = parseInt(res.data.totalElements)
    })
    .catch((err) => {
      ElMessage.error(err)
    })
}
let list_debounce = debounce(200, get_flow_list)
</script>

<style lang="scss" scoped>
.container {
  height: calc(100% - 40px);
  background-color: #fff;
  padding: 20px;
}
</style>
